<template>
  <div class="middle" @click="cancelFn" v-adaptive="{ bottomOffset: 0 }">
    <template v-for="item in dragStore.renderData" :key="item.id">
      <div v-show="item.leaveElement == 'back'" class="leaveElement"></div>
      <div draggable :class="item.click ? 'item click' : 'item'" @click="(e) => clickFn({ e, current: item })" @dragleave="(e) => dragLeave(e, item)" @dragover="(e) => dragEnter(e, item)">
        <div :style="dragStore.dragStyle">
          <div class="tools" v-show="item.click">
            <div class="back" @click="(e) => back(e, item)"></div>
            <div class="next" @click="(e) => next(e, item)"></div>
            <div class="delete" @click="(e) => deleteFn(e, item)"></div>
          </div>
          <div>
            <div v-if="item.key == 'cDio'">
              <div>弹窗新增容器</div>
              <div v-for="(ite, index) in item.childrens" :key="ite.id">
                <div draggable @click="(e) => clickFn({ e, current: ite, parent: item, currentIndex: index })" :class="ite.click ? 'click childItem' : 'childItem'">
                  <div class="tools" v-show="ite.click">
                    <div class="back" @click="(e) => back(e, ite)"></div>
                    <div class="next" @click="(e) => next(e, ite)"></div>
                    <div class="delete" @click="(e) => deleteFn(e, ite)"></div>
                  </div>
                  <component v-on="ite.methods" :id="ite.id" :is="componentFn(ite)" v-bind="combineObj(ite.props, ite.otherProps)"> </component>
                </div>
              </div>
            </div>
            <component v-on="item.methods" :id="item.id" :ref="(el) => (dragStore.refList[item.highEdit.ref] = el)" :is="componentFn(item)" v-bind="combineObj(item.props, item.otherProps)">
              <template v-if="formTypes.includes(item.key)" #otherFormItem="{ form }">
                <template v-for="(ite, index) in item.childrens" :key="ite.id">
                  <component v-if="item.key == 'cDio'" v-on="ite.methods" :id="ite.id" :is="componentFn(ite)" :itemValue="form[ite.props.itemKey]" v-bind="combineObj(ite.props, ite.otherProps)"> </component>
                  <div v-else draggable @click="(e) => clickFn({ e, current: ite, parent: item, currentIndex: index })" :class="ite.click ? 'click childItem' : 'childItem'">
                    <div class="tools" v-show="ite.click">
                      <div class="back" @click="(e) => back(e, ite)"></div>
                      <div class="next" @click="(e) => next(e, ite)"></div>
                      <div class="delete" @click="(e) => deleteFn(e, ite)"></div>
                    </div>
                    <component v-on="ite.methods" :id="ite.id" :is="componentFn(ite)" :itemValue="form[ite.props.itemKey]" v-bind="combineObj(ite.props, ite.otherProps)"> </component>
                  </div>
                </template>
              </template>
              <template v-if="item.key == 'cTable'" #otherColumned>
                <template v-for="(ite, index) in item.childrens" :key="ite.id">
                  <component v-on="ite.methods" :id="ite.id" :is="componentFn(ite)" v-bind="{ column: { ...ite.props.column, hasHeader: true } }">
                    <template #header
                      >{{ ite.props.column.label }}
                      <img class="cTableImg" @click="(e) => deleteFn(e, ite)" src="./img/delete.png" alt="" />
                      <img @click="(e) => clickFn({ e, current: ite, parent: item, currentIndex: index })" class="cTableImg" src="./img/edit.png" alt="" />
                    </template>
                  </component>
                </template>
              </template>
            </component>
          </div>
        </div>
      </div>
      <div class="leaveElement" v-show="item.leaveElement == 'next'"></div>
    </template>
  </div>
</template>
<script setup lang="ts">
import { useDrag } from "@/store/modules/drag";
import { combineObj } from "@/assets/utils";
import { cancelFn } from "@/views/coderCreate/editor/index";
const dragStore = useDrag();
let formTypes = ["cPage", "cDio", "cSearch"];
function componentFn(item) {
  return dragStore.registerConfig.componentMap[item.key].middleOpt.render;
}
function dragEnter(e, item) {
  if (!dragStore.enter) {
    dragStore.enter = true;
    if (dragStore.leaveItem) {
      dragStore.leaveItem.leaveElement = false;
      dragStore.leaveItem = null;
    }
    item.click = true;
    dragStore.enterItem = item;
  }
}
function dragLeave(e, item) {
  if (dragStore.enter) {
    dragStore.enter = false;
    item.leaveElement = e.y > e.target.offsetTop + e.target.offsetHeight ? "next" : "back";
    dragStore.leaveItem = item;
    dragStore.enterItem.click = false;
    dragStore.enterItem = null;
  }
}
function clickFn({ e, current, parent, currentIndex }) {
  e.stopPropagation();
  if (parent) dragStore.clickParent = { parent, iteindex: currentIndex };
  dragStore.clickItemSettings = {};
  dragStore.clickItem = current;
  dragStore?.registerConfig?.componentMap?.[dragStore?.clickItem?.key]?.rightOpt.settingRender.map((item) => {
    if (!dragStore?.clickItemSettings?.[item.editType]) dragStore.clickItemSettings[item.editType] = [];
    dragStore?.clickItemSettings[item.editType].push(item);
  });
  cancelFn();
  current.click = true;
}

function back(e, item) {
  if (item.pid) {
    let { parent, iteindex } = dragStore.clickParent;

    if (!iteindex) return ElMessage.error("移动失败");
    if (iteindex == 0) return ElMessage.error("已经是第一个了");
    change(iteindex, iteindex - 1, parent.childrens);
  }
  let indey = dragStore.renderData.findIndex((ite) => {
    return item.id == ite.id;
  });
  change(indey, indey - 1, dragStore.renderData);
}
function change(index1, index2, arrs) {
  let arr = arrs[index2];
  arrs[index2] = arrs[index1];
  arrs[index1] = arr;
}
function next(e, item) {
  if (item.pid) {
    let { parent, iteindex: index } = dragStore.clickParent;
    if (index === undefined) return ElMessage.error("移动失败");
    if (index == parent.childrens.length - 1) return ElMessage.error("已经是最后一个了");
    change(index, index + 1, parent.childrens);
  }
  let indey = dragStore.renderData.findIndex((ite) => {
    return item.id == ite.id;
  });
  change(indey, indey + 1, dragStore.renderData);
}
function deleteFn(e, item) {
  if (item.pid) {
    console.log(dragStore.clickParent);
    let { parent, iteindex } = dragStore.clickParent;
    return parent.childrens.splice(iteindex, 1);
  }
  let index = dragStore.renderData.findIndex((ite) => {
    return item.id == ite.id;
  });
  dragStore.renderData.splice(index, 1);
}
// function itemValueHandle(form,props){
//  if(props.itemValue) form[props.itemKey]=props.itemValue
//   // console.log(form,666);
//   return form
// }
</script>
<style lang="scss" scoped>
.middle {
  flex: 1;
  overflow-y: auto;
  margin: 20px 20px 0;
  box-sizing: border-box;
  padding: 10px;
  .leaveElement {
    width: 100%;
    background-color: #409eff;
    height: 5px;
  }
  .cTableImg {
    height: 15px;
    width: 15px;
    margin-left: 5px;
  }
  .click {
    border: 1px solid #409eff;
    margin-left: -1px;
    margin-top: -1px;
    margin-bottom: -1px;
    .tools {
      position: absolute;
      bottom: -23px;
      right: -1px;
      font-size: 12px;
      background-color: #409eff;
      padding: 5px;
      border-radius: 0px 0px 5px 5px;
      box-sizing: border-box;
      display: flex;
      z-index: 2027;
      div {
        height: 13px;
        width: 13px;
        background-repeat: no-repeat;
        background-size: 100%;
      }
      .next {
        margin: 0px 5px;
        background-image: url("./img/next.png");
      }
      .back {
        background-image: url("./img/back.png");
      }
      .delete {
        background-image: url("./img/deleteFormItem.png");
      }
    }
  }
  .item {
    padding: 5px;
    border-radius: 4px 4px 0px;
    position: relative;
    box-sizing: border-box;
  }
  .childItem {
    padding: 5px;
    border-radius: 4px;
    position: relative;
    margin-right: 5px;
    box-sizing: border-box;
    margin-bottom: 5px;
  }
}
</style>
